<template>
  <!-- 容器 -->
  <div class="root-container">
    <!-- 顶部区域 -->
    <Header></Header>
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 左边菜单区 -->
      <div class="left-menu">
        <el-menu router>
          <TreeMenu :treeData="treeData"></TreeMenu>
        </el-menu>
      </div>
      <!-- 右边展示区 -->
      <div class="right-main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue';
import TreeMenu from '@/components/TreeMenu.vue'
import { onMounted, ref } from 'vue'

const avatarSrc = require('@/assets/headpic.jpg') // 使用 require 加载图片
const treeData = ref([])

const loadTreeData = async () => {
  try {
    const userType = JSON.parse(localStorage.getItem('token')).identity // 假设在本地存储中保存了用户类型
    let treeDataModule
    if (userType === 'student') {
      treeDataModule = await import('@/mock/student.json')
    } else if (userType === 'teacher') {
      treeDataModule = await import('@/mock/teacher.json')
    }
    treeData.value = treeDataModule.default
  } catch (error) {
    console.error('Failed to load tree data:', error)
  }
}

onMounted(() => {
  loadTreeData()
})

const navigateTo = (route) => {
  console.log(`Navigating to ${route}`)
  // 在这里添加路由导航逻辑
}

const logout = () => {
  console.log('Logging out')
  // 在这里添加退出登录逻辑
}
</script>

<style lang="less" scoped>
/* 容器满屏 */.root-container {
  background-color: white;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.main-content {
  display: flex;
  flex: 1;
  width: 100%;
  overflow: hidden; /* 防止内部滚动条影响整体布局 */
}

.left-menu {
  background-color: rgb(255, 255, 255);
  width: 200px;
  height: 100%;
  border-right: 1px solid #e0e0e0;
  overflow-y: auto; /* 当内容过长时显示滚动条 */
}

.right-main {
  background-color: white;
  flex: 1;
  height: 100%;
  overflow-y: auto; /* 当内容过长时显示滚动条 */
  position: relative;
}
</style>
